<!--
 * @Date: 2021-10-27 09:15:50
 * @LastEditors: 邓春宜
 * @Desc: 圆角带刻度仪表图样式1
 * @LastEditTime: 2021-11-30 16:40:44
 * @FilePath: \tianjushi-kanban\src\components\charts\DottedBar1.vue
-->
<template>
  <div :style="[{ width: width, height: height, overflow: 'hidden' }]">
    <div
      ref="chartContainer"
      :style="[{ width: width, height: height }, _resetChartStyle]"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

import { onMounted, toRefs, ref, reactive, watch, computed } from "vue";
import { resetChartStyle, showLoading } from "@/core/tools/common";
export default {
  props: {
    title: {
      type: String,
      default: "Y标题",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    lineName:{
      type: String,
      default: "实际量",
    },
    barName:{
      type: String,
      default: "预算量",
    },
    category:{
      type:Array,
      default:['2021-12-1','2021-12-2','2021-12-3','2021-12-4','2021-12-5','2021-12-6','2021-12-7','2021-12-8','2021-12-9','2021-12-10']
    },
    barData:{
      type:Array,
      default:['20','30','40','50','60','20','80','90','100','100']
    },
    lineData:{
      type:Array,
      default:['30','40','50','60','70','30','90','100','110','100']
    }
  },

  setup (props, context){
   
    const chartContainer = ref(null);
    let chartDom = null;
 
    const _resetChartStyle = computed({
      get() {
        return resetChartStyle();
      },
    });

    watch(props, (newProps, oldProps) => {
      refreshChart();
    });
   
  function refreshChart(){
// option
     const option = {
       tooltip: {
       trigger: 'axis',
       axisPointer: {
         type: 'shadow'
       },  
     },

     legend: {
       data: [props.lineName, props.barName],
       textStyle: {
         color: '#ccc',
         fontSize:18
       }
     },
     xAxis: {
       data: props.category,
       axisLine: {
         lineStyle: {
           color: '#ccc'
         }
       }
     },
     yAxis: {
       splitLine: { show: false },
       axisLine: {
         lineStyle: {
           color: '#ccc'
         }
       }
     },
     series: [
       {
         name: props.lineName,
         type: 'line',
         smooth: true,
         showAllSymbol: true,
         symbol: 'emptyCircle',
         symbolSize: 15,
         data: props.lineData
       },      
       {
         name: props.barName,
         type: 'bar',
         barWidth: 15,
         itemStyle: {
           borderRadius: 5,
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             { offset: 0, color: '#14c8d4' },
             { offset: 1, color: '#43eec6' }
           ])
         },
         data: props.barData
       },
      {
         name:props.lineName,
         type: 'bar',
         barGap: '-100%',
         barWidth: 15,
         itemStyle: {
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             { offset: 0, color: 'rgba(20,200,212,0.5)' },
             { offset: 0.2, color: 'rgba(20,200,212,0.2)' },
             { offset: 1, color: 'rgba(20,200,212,0)' }
           ])
         },
         z: -12,
         data: props.lineData,
         tooltip: {
           show:false,  
        }
       }, 
       {
         name: 'dotted',
         type: 'pictorialBar',
         symbol: 'rect',
         itemStyle: {
           color: '#0f375f'
         },
         symbolRepeat: true,
         symbolSize: [12, 4],
         symbolMargin: 1,
         z: -10,
         data: props.lineData,
         tooltip: {
           show:false,  
        }
       }
      
     ]
   };

   chartDom.setOption(option);
   chartDom.hideLoading();  
  };

  onMounted(() => { 
    chartDom =  echarts.init(chartContainer.value);
    refreshChart();
    })

  return {
      chartContainer,
	   _resetChartStyle 
    }
 }    
 
};
</script>

<style>
</style>